<template>

  <avue-crud ref="depositRef" :table-loading="tableLoading" :option="option" @refresh-change="depositList" :data="data"
    :page="page" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange"
    @search-reset="searchReset">


    <template #menu="{ row }">
      <el-button type="primary" text @click="Prop_userCtl(row)">操作</el-button>
      <el-button type="primary" text @click="userDetail(row)">详细</el-button>
    </template>
  </avue-crud>

  <DetailDialog :visible="detailVisible" v-model="detailVisible" :detailData="detail_data"
    @update:visible="detailVisible = $event" />
    <el-dialog v-model="userCtlVisible">
    <el-from ref="form" :model="userCtlFrom">
      <el-form-item>
        <span>用户ID:{{ userCtlFrom.userId }}</span>
      </el-form-item>
      <el-form-item>
        <span>当前状态:{{ userCtlFrom.pageNum }}</span>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="userCtlFrom.control">
          <el-radio-button label="送"></el-radio-button>
          <el-radio-button label="正常"></el-radio-button>
          <el-radio-button label="杀"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="送分金额" prop="changeGold">
        <el-input v-model="userCtlFrom.changeGold"></el-input>
      </el-form-item>
    </el-from>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="userCtlVisible = false">取消</el-button>
        <el-button type="primary" @click="comit_userCtl(userCtlFrom)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import DetailDialog from '@/components/DetailDialog.vue';
import { onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { depositRecord, getUserInfo, setUserCtl,
  getUserCtl } from "@/apis/admin";
import deposit from "@/options/deposit";
const tableLoading = ref(false);
const userCtlVisible = ref(false);
const option = deposit;
const page = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  searchInfo: {},
});
const userCtlFrom = ref({
  userId: '000',
  control: '送',
  changeGold: 0,
  CurrentChangeGold: 0,
  pageNum: 0
})
const data = ref([]);
const searchChange = (form, done) => {
  page.searchInfo = form;
  page.currentPage = 1;
  depositList();
  done();
};
const searchReset = () => {
  page.currentPage = 1;
  page.searchInfo = {};
  depositList();
};
const sizeChange = (val) => {
  page.pageSize = val;
  depositList();
};
/**
 * 
 * @param data 用户点杀操作
 */
 const Prop_userCtl = async (data) => {
  userCtlVisible.value = true;
  window.loading(1)
  let _serverData = await getUserCtl.post("", { userId: data.userId })
  let serverData = _serverData.data;
  console.log(serverData)

  if (serverData.Control == 0) {
    userCtlFrom.value.control = '正常'
  } else if (serverData.Control == 2) {
    // control = 2
    userCtlFrom.value.control = '杀'
  } else {
    // control = 1
    userCtlFrom.value.control = '送'
  }
  userCtlFrom.value.CurrentChangeGold = serverData.CurrentChangeGold / 100
  userCtlFrom.value.changeGold = serverData.ChangeGold / 100;
  userCtlFrom.value.userId = data.userId;
  userCtlFrom.value.pageNum = (serverData.ChangeGold - serverData.CurrentChangeGold)/100
  window.loading(0)
}
const comit_userCtl = (data) => {
  console.log(data)
  window.loading(1)
  let control = 0;//正常
  if (data.control == '正常') {
    control = 0
  } else if (data.control == '杀') {
    control = 2
    if (Number(data.changeGold) > 0) {
      data.changeGold = -Number(data.changeGold)
    }
  } else {
    control = 1
    if (Number(data.changeGold) < 0) {
      data.changeGold = Math.abs(Number(data.changeGold))
    }
  }
  if (isNaN(Number(data.changeGold))) {
    data.changeGold = 0;
  }
  setUserCtl.post("", { userId: data.userId, control: control, changeGold: Number(data.changeGold) * 100 }).then((res) => {
    if (res.code == 200) {
      ElMessage.success("修改成功!");
    }
    window.loading(0)
    userCtlVisible.value = false;

  });
}
const currentChange = (val) => {
  page.currentPage = val;
  depositList();
};
const depositList = () => {
  tableLoading.value = true;
  depositRecord
    .post("", {
      page: page.currentPage,
      pageSize: page.pageSize,
      searchInfo: page.searchInfo,
      orderKey: "created_at",
      orderType: "desc",
    })
    .then((res) => {
      tableLoading.value = false;
      if (res.code == 200) {
        data.value = res.data.list || [];
        page.total = res.data.total;
      }
    });
};
onMounted(() => {
  depositList();
});


const detailVisible = ref(false);
const detail_data = ref({});
const flowUserId = ref("");
const flow_loading = ref(false);

const userDetail = (data) => {
  flowUserId.value = data.userId;
  flow_loading.value = true;
  getUserInfo.post("", {
    userId: data.userId
  }).then((res) => {
    detail_data.value = res.data;
    detailVisible.value = true;

  })
};

</script>
